<template>
  <el-card>
    <h2>客房管理</h2>
    <el-button type="primary" @click="openAdd">新增客房</el-button>
    <el-table :data="rooms" style="width: 100%;margin-top:16px">
      <el-table-column prop="roomId" label="ID" width="60" />
      <el-table-column prop="roomNumber" label="房号" width="80" />
      <el-table-column label="客房类型">
        <template #default="scope">
          {{ getRoomTypeName(scope.row.typeId) }}
        </template>
      </el-table-column>
      <el-table-column prop="floor" label="楼层" width="80"/>
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="priceModifier" label="价格系数" />
      <el-table-column prop="notes" label="备注" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" @click="openEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="onDelete(scope.row.roomId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" :title="dialogTitle">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
        <el-form-item label="房号" prop="roomNumber">
          <el-input v-model="form.roomNumber" />
        </el-form-item>
        <el-form-item label="客房类型" prop="typeId">
          <el-select v-model="form.typeId" placeholder="请选择客房类型">
            <el-option 
              v-for="type in roomTypes" 
              :key="type.typeId" 
              :label="type.typeName" 
              :value="type.typeId" 
            />
          </el-select>
        </el-form-item>
        <el-form-item label="楼层" prop="floor">
          <el-input v-model="form.floor" type="number" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option label="可用" value="available" />
            <el-option label="已占用" value="occupied" />
            <el-option label="维护中" value="maintenance" />
            <el-option label="已预订" value="reserved" />
          </el-select>
        </el-form-item>
        <el-form-item label="价格系数" prop="priceModifier">
          <el-input v-model="form.priceModifier" type="number" step="0.01" />
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input v-model="form.notes" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getRooms, addRoom, updateRoom, deleteRoom } from '../api/room';
import { getRoomTypes } from '../api/roomType';
import { ElMessage, ElMessageBox } from 'element-plus';

const rooms = ref([]);
const roomTypes = ref([]);
const dialogVisible = ref(false);
const dialogTitle = ref('');
const form = ref({ 
  roomId: null, 
  roomNumber: '', 
  typeId: '', 
  floor: '', 
  status: 'available', 
  priceModifier: 1.00, 
  notes: '' 
});
const formRef = ref();

const rules = {
  roomNumber: [{ required: true, message: '请输入房号', trigger: 'blur' }],
  typeId: [{ required: true, message: '请选择客房类型', trigger: 'change' }],
  floor: [{ required: true, message: '请输入楼层', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
};

const loadRooms = async () => {
  rooms.value = await getRooms();
};

const loadRoomTypes = async () => {
  roomTypes.value = await getRoomTypes();
};

const getRoomTypeName = (typeId) => {
  const roomType = roomTypes.value.find(type => type.typeId === typeId);
  return roomType ? roomType.typeName : `类型${typeId}`;
};

const getStatusType = (status) => {
  const types = {
    'available': 'success',
    'occupied': 'danger',
    'maintenance': 'warning',
    'reserved': 'info'
  };
  return types[status] || 'info';
};

const getStatusText = (status) => {
  const texts = {
    'available': '可用',
    'occupied': '已占用',
    'maintenance': '维护中',
    'reserved': '已预订'
  };
  return texts[status] || status;
};

const openAdd = () => {
  dialogTitle.value = '新增客房';
  form.value = { 
    roomId: null, 
    roomNumber: '', 
    typeId: '', 
    floor: '', 
    status: 'available', 
    priceModifier: 1.00, 
    notes: '' 
  };
  dialogVisible.value = true;
};

const openEdit = (row) => {
  dialogTitle.value = '编辑客房';
  form.value = { ...row };
  dialogVisible.value = true;
};

const onSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return;
    if (!form.value.roomId) {
      await addRoom(form.value);
      ElMessage.success('新增成功');
    } else {
      await updateRoom(form.value);
      ElMessage.success('修改成功');
    }
    dialogVisible.value = false;
    loadRooms();
  });
};

const onDelete = (id) => {
  ElMessageBox.confirm('确定要删除该客房吗？', '提示', { type: 'warning' })
    .then(async () => {
      await deleteRoom(id);
      ElMessage.success('删除成功');
      loadRooms();
    });
};

onMounted(() => {
  loadRooms();
  loadRoomTypes();
});
</script> 